import { fetchRequest } from '@/utils/Request';
import {url} from '@/utils/url';
import {debounce} from 'lodash';
import {Button, message, Select} from 'antd';
import {
    SearchOutlined,
} from '@ant-design/icons'
import React, { useEffect, useState } from 'react'
import HealthCodeList from './HealthCodeList';
const { Option } = Select;

function HealthCodeData(props: any) {
    let [datas, setData] = useState({
        sky: [
            {
                name: '正常',
                value: 0
            },
            {
                name: '告警',
                value: 0
            },
            {
                name: '危险',
                value: 0
            }
        ],
        week: [
            {
                name: '正常',
                value: 0
            },
            {
                name: '告警',
                value: 0
            },
            {
                name: '危险',
                value: 0
            }
        ],
        month: [
            {
                name: '正常',
                value: 0
            },
            {
                name: '告警',
                value: 0
            },
            {
                name: '危险',
                value: 0
            }
        ],
    })

    const {query, onChange, listData} = props
    const [treeNode, setTreeNode] = useState(true);
    const [collegeAreaList, setCollegeAreaList] = useState<any[]>([]);

    const [requestParamTree, setRequestParamTree] = useState<any>(
        {
            "level": 0,
            "treeId": "0"
        }
    );

    useEffect(() => {
    }, [collegeAreaList])
    useEffect(() => {
        if (treeNode) {
            getSchoolOrganizationRequest()
            setTreeNode(false)
        }
        if (Object.keys(listData).length > 0) {
            setData(listData)
        }
        console.log(listData)
    }, [requestParamTree,listData])

    async function getSchoolOrganizationRequest(collegeAndAreName: string = '') {
        try {
            const json = await fetchRequest(url.GET_CAMPUS, {collegeAndAreName: collegeAndAreName});
            if (json.success) {
                message.destroy();
                setCollegeAreaList([...json.data]);
            } else {
                message.destroy();
                message.error(json.error);
            }
        } catch (error: any) {
            message.destroy();
            message.error(error.message);
        }
    }

    const onSearch = debounce(getSchoolOrganizationRequest, 300, {leading: false, trailing: true})
    return (
        <div className="HealthCodeData">
            <div className="HealthCode_Data">
                <p className="titleName">防疫核验实时数据 </p>
                <div>校区：<Select showSearch
                                notFoundContent={null}
                                showArrow={false}
                                filterOption={false}
                                onChange={onChange} onSearch={onSearch}
                                style={{width: 300, marginLeft: 5}}>
                    {collegeAreaList.map((d: any, index: number) => <Option value={d.collegeAreaId}
                                                                            key={index}>{d.collegeAndArea}</Option>)}
                </Select>
                    <Button type="primary" onClick={query} style={{marginLeft: '8px'}}
                            icon={<SearchOutlined/>}>查询</Button></div>
            </div>
            <div className="HealthCodeList">
                {
                    Object.keys(datas).map((item, index) => {
                        const data = datas[item]
                        const titleMap = {
                            sky: "今日防疫核验状态",
                            week: "本周防疫核验状态",
                            month: "本月防疫核验状态"
                        }
                        return <HealthCodeList key={index} ListData={data} title={titleMap[item]} />
                    })

                }
            </div>
        </div>
    )
}

export default HealthCodeData
